<template>
    <div class="content">
        <van-tabs v-model="active">
            <van-tab title="完善组织体系布局" name="1">
                <div class="van-steps van-steps--vertical">
                    <div class="van-steps__items">
                        <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list0" :key="index">
                            <div class="van-step__title">
                                <div>{{item.datetime}}</div>
                                <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                    <p>{{itemm.title}}</p>
                                </div>
                            </div>
                            <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                            <div class="van-step__line"></div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="提高救治能力" name="2">
                <div class="van-steps van-steps--vertical">
                    <div class="van-steps__items">
                        <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list1" :key="index">
                            <div class="van-step__title">
                                <div>{{item.datetime}}</div>
                                <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                    <p>{{itemm.title}}</p>
                                </div>
                            </div>
                            <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                            <div class="van-step__line"></div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="强化管控措施" name="3">
                <div class="van-steps van-steps--vertical">
                <div class="van-steps__items">
                    <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list2" :key="index">
                        <div class="van-step__title">
                            <div>{{item.datetime}}</div>
                            <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                <p>{{itemm.title}}</p>
                            </div>
                        </div>
                        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                        <div class="van-step__line"></div>
                    </div>
                </div>
            </div></van-tab>
            <van-tab title="加强诊断流调" name="4">
                <div class="van-steps van-steps--vertical">
                <div class="van-steps__items">
                    <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list3" :key="index">
                        <div class="van-step__title">
                            <div>{{item.datetime}}</div>
                            <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                <p>{{itemm.title}}</p>
                            </div>
                        </div>
                        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                        <div class="van-step__line"></div>
                    </div>
                </div>
            </div></van-tab>
            <van-tab title="做好物资保障" name="5">
                <div class="van-steps van-steps--vertical">
                <div class="van-steps__items">
                    <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list4" :key="index">
                        <div class="van-step__title">
                            <div>{{item.datetime}}</div>
                            <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                <p>{{itemm.title}}</p>
                            </div>
                        </div>
                        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                        <div class="van-step__line"></div>
                    </div>
                </div>
            </div></van-tab>
            <van-tab title="组织企业生产" name="6">
                <div class="van-steps van-steps--vertical">
                <div class="van-steps__items">
                    <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list5" :key="index">
                        <div class="van-step__title">
                            <div>{{item.datetime}}</div>
                            <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                <p>{{itemm.title}}</p>
                            </div>
                        </div>
                        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                        <div class="van-step__line"></div>
                    </div>
                </div>
            </div></van-tab>
            <van-tab title="加强督查考核" name="7">
                <div class="van-steps van-steps--vertical">
                <div class="van-steps__items">
                    <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list6" :key="index">
                        <div class="van-step__title">
                            <div>{{item.datetime}}</div>
                            <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                <p>{{itemm.title}}</p>
                            </div>
                        </div>
                        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                        <div class="van-step__line"></div>
                    </div>
                </div>
            </div></van-tab>
            <van-tab title="指挥部发文" name="8">
                <div class="van-steps van-steps--vertical">
                    <div class="van-steps__items">
                        <div class="van-hairline van-step van-step--vertical" v-for="(item,index) in list7" :key="index">
                            <div class="van-step__title">
                                <div>{{item.datetime}}</div>
                                <div v-for="(itemm,indexx) in item.event" :key="indexx">
                                    <p>{{itemm.title}}</p>
                                </div>
                            </div>
                            <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
                            <div class="van-step__line"></div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { yiqinggettime } from '@/api/yi-qing-fang-kong'
export default {
  name: 'index',
  data () {
    return {
      list: [],
      active: 0,
      list0: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      list7: []
    }
  },
  methods: {
    getlist () {
      yiqinggettime({ type: 8, personid: this.$route.query.personid }).then(ret => {
        this.list0 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 1, personid: this.$route.query.personid }).then(ret => {
        this.list1 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 2, personid: this.$route.query.personid }).then(ret => {
        this.list2 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 3, personid: this.$route.query.personid }).then(ret => {
        this.list3 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 4, personid: this.$route.query.personid }).then(ret => {
        this.list4 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 5, personid: this.$route.query.personid }).then(ret => {
        this.list5 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 6, personid: this.$route.query.personid }).then(ret => {
        this.list6 = this.assembly(ret.data.data.result)
      })
      yiqinggettime({ type: 7, personid: this.$route.query.personid }).then(ret => {
        this.list7 = this.assembly(ret.data.data.result)
      })
    },

    assembly (list) {
      var map = {}
      var dest = []// 新的json数组
      let arr = list
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i]
        if (!map[ai.datetime]) {
          dest.push({
            datetime: ai.datetime,
            event: [ai]
          })
          map[ai.datetime] = ai
        } else { // 放到对应的id下面
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j]
            if (dj.datetime === ai.datetime) {
              dj.event.push(ai)
              break
            }
          }
        }
      }
      console.log(dest)
      return dest
    }

  },
  mounted () {
    this.getlist()
  }
}
</script>
<style scoped>
    .van-step{
        font-size: 14px;
        color: #333333;
    }
    .content >>> .van-tab{
        font-size: 14px;
        flex-basis: 26% !important;
    }
</style>
